<template>
  <div>
    <el-card v-if="bol">
      <div class="head">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <el-form
        :inline="true"
        :model="form"
        class="form"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="学科" class="four">
          <el-select
            @focus="showOptions"
            v-model="searchList.subjectID"
            @change="changeClick"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in optionData"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" class="four">
          <el-select v-model="searchList.catalogID">
            <el-option
              v-for="item in twoLever"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" class="four">
          <el-select v-model="form.tags"> </el-select>
        </el-form-item>
        <el-form-item label="关键字" class="four">
          <el-input
            v-model="searchList.keyword"
            placeholder="请选择"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型" class="four">
          <el-select v-model="form.questionType"> </el-select>
        </el-form-item>
        <el-form-item label="难度" class="four">
          <el-select v-model="form.difficulty">
            <el-option value="1" label="简单"></el-option>
            <el-option value="2" label="一般"></el-option>
            <el-option value="3" label="困难"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" class="four">
          <el-select v-model="form.direction"> </el-select>
        </el-form-item>
        <el-form-item label="录入人" class="four">
          <el-select v-model="form.creatorID"> </el-select>
        </el-form-item>
        <el-form-item label="题目备注" class="four">
          <el-select v-model="form.remarks"> </el-select>
        </el-form-item>
        <el-form-item label="企业简称" class="four">
          <el-select v-model="form.shortName"> </el-select>
        </el-form-item>
        <el-form-item label="城市" class="four">
          <div class="twoSelect">
            <el-select v-model="form.province"> </el-select>
            <el-select v-model="form.city"> </el-select>
          </div>
        </el-form-item>
        <el-form-item class="four" style="text-align: right">
          <el-button @click="clearForm">清除</el-button>
          <el-button type="primary" @click="submit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert
        title="消息提示的文案"
        style="margin-bottom: 15px"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 数据 -->
      <el-table :data="tableData" style="width: 100%" class="table">
        <el-table-column fixed prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录" width="200">
        </el-table-column>
        <el-table-column label="题型" width="200">
          <template v-slot="scope">
            <span>{{ scope.row.questionType | TypeQuestion }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="250">
          <template v-slot="scope" style="max-height:300px">
            <div v-html="handleRichHtmlImg(scope.row.question)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="adddate" label="录入时间" width="150">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="200">
          <template v-slot="scope">
            <span>{{ scope.row.difficulty | difficult }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="{ row }">
            <el-button
              class="blue"
              plain
              type="primary"
              icon="el-icon-view"
              circle
              @click="lookEvent(row)"
            ></el-button>
            <!-- 修改按钮 -->

            <el-button
              @click="editEvent(row)"
              plain
              type="success"
              class="green"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              plain
              type="danger"
              class="red"
              icon="el-icon-delete"
              circle
              @click="delEvent(row)"
            ></el-button>
            <el-button
              plain
              type="warning"
              class="yellow"
              icon="el-icon-check"
              circle
              @click="giveEvent(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        class="pagination"
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[1, 3, 5, 10, 20, 50, 100, 200, 300, 400]"
        :page-size="form.pagesize"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <view-dialog v-model="show" ref="look"></view-dialog>
  </div>
</template>

<script>
import {
  list as articleList,
  detail,
  remove,
  choiceAdd
} from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import viewDialog from '../components/viewDialog.vue'
export default {
  components: { viewDialog },
  data () {
    return {
      show: false,
      // 二级目录
      twoLever: [],
      total: null,
      searchList: {
        subjectID: null,
        catalogID: null,
        keyword: null
      },
      form: {
        page: 1, // 否       | 1    | 当前页数       |
        pagesize: 10, // 否       | 10   | 页尺寸         |
        difficulty: null, // 否       |      | 难度           |
        questionType: null, // 否       |      | 试题类型       |
        tags: null, // 否       |      | 标签名称       |
        province: null, // 否       |      | 企业所在地省份 |
        city: null, // 否       |      | 企业所在城市   |
        remarks: null, // 否       |      | 题目备注       |
        shortName: null, // 否       |      | 企业简称       |
        direction: null, // 否       |      | 方向           |
        creatorID: null, // 否       |      | 录入人         |
        catalogID: null // 否       |      | 目录           |
      },
      tableData: [],
      optionData: [],
      bol: true
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 图片过滤器
    handleRichHtmlImg: function (html) {
      const replacedHtml = html.replace(/<?img[^>]*?>/g, str => {
        const matchArr = str.match(/src="(.*?)"/) || []
        const imgSrc = matchArr[1] || ''
        // 这里替换显示的内容根据需求而定
        const defaultImg =
          '<img class="img-icon" src="https://ae01.alicdn.com/kf/H9a480ccb053d43ff89ed22a89982337dB.png" data-img-src=' +
          imgSrc +
          ' />'
        str = str.replace(/<(img).*?>/g, defaultImg)
        return str
      })
      return replacedHtml
    },

    // 点击修改按钮
    editEvent (row) {
      // console.log(row)
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    // 提交到精选
    giveEvent (row) {
      this.$confirm('确认提交吗?', '提交精选').then(async () => {
        const res = await choiceAdd({ id: row.id, choiceState: 1 })
        if (res.status === 200) {
          this.$message.success('提交成功')
          this.getData()
        }
      })
    },
    // 删除数据
    delEvent (row) {
      // console.log(row)
      this.$confirm('确认删除吗?', '删除问题').then(async () => {
        const res = await remove({ id: row.id })
        if (res.status === 200) {
          this.$message.success('清除成功')
          this.getData()
        }
      })
    },
    // 点击查看按钮
    async lookEvent (row) {
      const res = await detail({ id: row.id })
      this.show = true
      this.$refs.look.dataList = res.data
      this.$refs.look.nameList = row
      // console.log(res.data)
    },
    // 选中select栏
    async changeClick (e) {
      // console.log(e)
      const res = await tagsSimple({ subjectID: e })
      // console.log(res, 111)
      this.searchList.catalogID = null
      this.twoLever = res.data
    },
    // 搜索按钮
    submit () {
      this.form.subjectID = this.searchList.subjectID
      this.form.catalogID = this.searchList.catalogID
      this.form.keyword = this.searchList.keyword
      this.form.page = 1
      this.getData()
    },
    // 清除按钮
    clearForm () {
      this.searchList.subjectID = null
      this.form.difficulty = null
      this.searchList.catalogID = null
      this.searchList.keyword = null
      this.getData()
    },
    // 获取下拉列表数据
    async showOptions () {
      const res = await simple()
      this.optionData = res.data
      // console.log(res)
    },
    // 获取文章数据
    async getData () {
      this.bol = false
      const res = await articleList(this.form)
      // console.log(res, '重置页面')
      this.total = res.data.counts
      this.tableData = res.data.items
      this.$nextTick(() => {
        this.bol = true
      })
    },
    // 页面总数改变
    handleSizeChange (val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getData()
    },
    // 页面改变
    handleCurrentChange (val) {
      this.setsearch(this.form.subjectID, this.searchList.subjectID)
      this.setsearch(this.form.catalogID, this.searchList.catalogID)
      this.setsearch(this.form.keyword, this.searchList.keyword)
      this.form.page = val
      this.getData()
    },
    setsearch (name1, name2) {
      if (name1) {
        if (name1 !== name2) {
          name2 = name1
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  span {
    color: #ffcce2;
    font-size: 12px;
  }
}
.form {
  display: flex;
  justify-content: center;

  flex-wrap: wrap;
  .four {
    width: 25%;
    margin-right: 0;
    .el-select {
      width: 300px;
    }
    .el-input {
      width: 300px;
    }
    .twoSelect {
      display: flex;
      .el-select {
        width: 150px;
      }
    }
  }
}
::v-deep .el-table th.is-leaf {
  background-color: #fafafa;
  border-bottom: 2px solid #e8e8e8;
}
.blue {
  color: #bfdefe;
  border: 1px solid #bfdefe;
  :hover {
    background-color: #409eff;
  }
}
.table {
  margin-bottom: 20px;
}
.pagination {
  margin-bottom: 20px;
}
::v-deep .img-icon {
  width: 20px;
}
</style>
